
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Avatar, AvatarFallback } from "@/components/ui/avatar";
import { Brain, Users, ArrowRight } from "lucide-react";

export const PedagogicalCircles = () => {
  const circles = [
    { name: "Assessment Circle", members: 234, category: "Assessment", latest: "1 hour ago", description: "Innovative assessment strategies and feedback mechanisms" },
    { name: "AI Teaching Studio", members: 189, category: "EdTech", latest: "30 minutes ago", description: "Integrating AI tools effectively in educational practice" },
    { name: "Project-Based Learning", members: 167, category: "Methodology", latest: "2 hours ago", description: "Real-world projects that engage and challenge students" },
    { name: "Differentiated Instruction", members: 145, category: "Inclusion", latest: "1 hour ago", description: "Meeting diverse learning needs in every classroom" },
  ];

  return (
    <Card className="bg-white dark:bg-gray-800 shadow-sm border">
      <CardHeader>
        <div className="flex items-center justify-between">
          <CardTitle className="text-lg font-semibold flex items-center gap-2">
            <Brain className="w-5 h-5 text-purple-600" />
            🧑‍🏫 Pedagogical Circles
          </CardTitle>
          <Button variant="ghost" size="sm" className="text-purple-600 hover:text-purple-700">
            Explore All <ArrowRight className="w-4 h-4 ml-1" />
          </Button>
        </div>
        <p className="text-sm text-gray-600 dark:text-gray-400">
          Focused on teaching methods and reflective practice
        </p>
      </CardHeader>
      <CardContent>
        <div className="grid gap-4">
          {circles.map((circle, index) => (
            <div key={index} className="flex items-center justify-between p-4 border rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700/50 transition-colors cursor-pointer">
              <div className="flex items-center space-x-4">
                <Avatar>
                  <AvatarFallback>
                    <Brain className="w-4 h-4" />
                  </AvatarFallback>
                </Avatar>
                <div>
                  <h4 className="font-semibold text-gray-900 dark:text-gray-100">{circle.name}</h4>
                  <p className="text-sm text-gray-500 dark:text-gray-400 mb-1">{circle.description}</p>
                  <p className="text-xs text-gray-400">
                    {circle.members} members • Latest: {circle.latest}
                  </p>
                </div>
              </div>
              <Button size="sm" variant="outline">
                <Users className="w-4 h-4 mr-1" />
                Join
              </Button>
            </div>
          ))}
        </div>
      </CardContent>
    </Card>
  );
};
